<template>
  <section class="padding EndWaybillList">
    <el-card>
      <el-form
        :inline="true"
        :model="searchCriteria"
        class=" padding-top-sm flex align-center justify-between"
        size="mini"
      >
        <el-form-item label="通知内容">
          <el-input
            v-model="searchCriteria.message"
            type="text"
            placeholder="通知内容"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div class=" padding-bottom-sm flex justify-between">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes,total"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <el-button-group>
          <el-button type="primary" size="mini" @click="onFilter">
            批量已读
          </el-button>
        </el-button-group>
      </div>
      <el-table
        class="table-box"
        :data="tableData"
        style="width: 100%"
        size="mini"
        border
        @select-all="selectAll"
        @select="selectItem"
      >
        <el-table-column type="selection" align="center" />
        <template>
          <el-table-column label="通知内容">
            <template slot-scope="scope">
              <div class="message-link-div" @click="openUrl(scope.row)" v-html="scope.row.message"></div>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="状态" prop="statusName" width="80" />
        <el-table-column label="发送时间" prop="cdate" width="200" />
      </el-table>
    </el-card>
  </section>
</template>

<script>
//  import TableModule from '@/components/TableModule'

import { manageMessage, batchReadMessage } from '@/api/systemInformation'

export default {
  name: 'SystemInformation',
  components: {
    //  TableModule
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      pageTotal: 0,
      searchCriteria: {
        message: ''
      },
      tableColumns: [
        { prop: 'message', label: '通知内容' },
        { prop: 'cdate', label: '发送时间' }
      ],
      tableData: [],
      selectData: [],
      statusMap:{
            0: '未读',
            1: '已读'
        },
    }
  },
  
  mounted() {
    this.operationList()
  },
  methods: {
    async operationList() {
      this.$store.dispatch('app/toggleDialog', true)
      const dataCont = await manageMessage(this.searchCriteria)
      this.tableData = dataCont.datas
      this.tableData.forEach(data=>{
        data.statusName = this.statusMap[data.status];;
      })
      this.pageTotal = dataCont.count
      //  console.log("dataCont",dataCont);
      this.$store.dispatch('app/toggleDialog', false)
    },
    onSubmit() {
      // console.log(this.searchCriteria)
      this.operationList()
    },
    onReset() {
      this.searchCriteria = {
        message: ''
      }
      this.operationList()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.operationList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.operationList()
    },
    selectAll(rows) {
      //  console.log("selectAll",rows)
      this.selectData = rows
    },
    selectItem(rows) {
      // console.log("selectItem",rows)
      this.selectData = rows
    },
    async onFilter() {
      this.$store.dispatch('app/toggleDialog', true)
      //console.log('selectData', this.selectData)
      const dataCont = await batchReadMessage(this.selectData)
     // console.log('dataCont', dataCont)
      if (dataCont.code === 200) {
        this.$message({
          message: '提交成功!',
          type: 'success'
        })
        this.operationList()
      } else {
        this.$message.error('提交失败')
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    openUrl(row) {
      //console.log("row",row)
      this.$router.push({
        name: row.clientTargetPath,
        params: { waybillId: row.targetId }
      })
    }
  }
}
</script>

<style scoped>
.EndWaybillList >>> .el-textarea__inner {
  min-height: 60px !important;
}
.message-link-div {
  text-align: center;
}
.message-link-div >>> a {
  color: blue;
}
.message-link-div >>> a:hover {
  text-decoration: underline;
}
</style>
